<template>
    <div class="index">
        <div class="index-box">
            <img src="" alt="">
            <div class="login" id="indexLogin" @click="Login" ref="indexLogin">登录/注册</div>
            <el-input
                suffix-icon="el-icon-search"
                v-model="input1">
            </el-input>
        </div>
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick"> 
                <el-tab-pane label="首页" name="first" style="font-size:24px;">
                    <!-- 轮播图 -->
                    <Lunbo></Lunbo>
                    <!-- 三张图 -->
                    <Show></Show>
                    <!-- TFboys -->
                    <Person></Person>
                    <!-- 个性展示 -->
                    <Broast></Broast>
                    <!-- 列表人物 -->
                    <Photo></Photo>
                    <!-- 瀑布流 -->
                    <Street></Street>
                    <!-- 底部图片 -->
                    <Contain></Contain>
                    <!-- 脚注 -->
                    <Footer></Footer>
                </el-tab-pane>
                <el-tab-pane label="时装" name="second">
                    <!-- 第一块 -->
                    <Nav></Nav>
                    <!-- 最新时装 -->
                    <Three></Three>
                    <!-- 列表 -->
                    <List></List>
                    <!-- 脚注 -->
                    <Footer></Footer>
                </el-tab-pane>
                <el-tab-pane label="街拍" name="third">
                    <!-- 瀑布流 -->
                    <Flow></Flow>
                    <Footer></Footer>
                </el-tab-pane>
                <el-tab-pane label="美容" name="fourth">
                    <!-- 轮播图 -->
                    <Rotation></Rotation>
                    <!-- 内容 -->
                    <Cosmetology></Cosmetology>
                    <Img></Img>
                    <!-- 脚注 -->
                    <Footer></Footer>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    // 首页
    import Lunbo from '../Lunbo/index.vue'
    import Show from '../Show/index.vue'
    import Person from '../Person/index.vue'
    import Broast from "../Broast/index.vue"
    import Photo from "../Photo/index.vue"
    import Street from "../Street/index.vue"
    import Contain from "../Contain/index.vue"
    import Footer from "../Footer/index.vue"

    // 时装
    import Nav from '../TwoNav/index.vue'
    import Three from '../Twobroast/index.vue'
    import List from '../TwoList/index.vue'

    // 街拍
    import Flow from '../ThreeStreetShot/index.vue'

    // 美容
    import Rotation from '../FourLunbo/index.vue'
    import Cosmetology from '../FourContent/index.vue'
    import Img from '../FourImg/index.vue'
	
	// 注册
	import Login from '../Login/index.vue'

    export default {
        components: {Lunbo,Show,Person,Broast,Photo,Street,Contain,Footer,Nav,Three,List,Flow,Rotation,Cosmetology,Img,Login},
        data() {
            return {
                // 代表选中的导航栏
                activeName: 'first',
                input1: ''
            }
        },
        methods: {
            handleClick(tab, event) {
                // console.log(tab, event);
            },
			Login() {
				this.$router.push('/login')
			}
        }
    }
</script>

<style scoped>
	#indexLogin {
		cursor: pointer;
	}
    .index-box .login {
        margin: 10px 0px;
    }
    .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll {
        position: relative;
    }
    /* .el-tabs__nav-scroll .el-tabs__nav {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    } */
</style>